<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas{
            background:lightcyan;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="1000" height="600"></canvas>
</body>
<script>
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    function roundedRect(cornerX,cornerY,width,height,cornerRadius){
        if(width>0){
            context.moveTo(cornerX+cornerRadius,cornerY);
        }else{
            context.moveTo(cornerX-cornerRadius,cornerY);
        }

        context.arcTo(cornerX+width,cornerY,cornerX+width,cornerY+height,cornerRadius); //以width为正来看，为右上角
        context.arcTo(cornerX+width,cornerY+height,cornerX,cornerY+height,cornerRadius);//为右下角
        context.arcTo(cornerX,cornerY+height,cornerX,cornerY,cornerRadius);//为左下角

        if(width>0){ // 闭合路径
            context.arcTo(cornerX,cornerY,cornerX+cornerRadius,cornerY,cornerRadius) //为左上角
        }else{
            context.arcTo(cornerX,cornerY,cornerX-cornerRadius,cornerY,cornerRadius);
        }
    }
    function drawRoundedRect(strokeStyle,fillStyle,cornerX,cornerY,width,height,cornerRadius){
        context.beginPath();

                roundedRect(cornerX,cornerY,width,height,cornerRadius);

                context.strokeStyle = strokeStyle;
                context.fillStyle = fillStyle;
                context.lineWidth = 10;

                context.stroke();
                context.fill();
    }

    
    drawRoundedRect('blue','yellow',50,40,100,100,10); //以左上角为起点绘制
            drawRoundedRect('purple','green',275,40,-100,100,20);//以右上角为起点绘制
            drawRoundedRect('red','white',300,140,100,-100,30);//以左下角为起点绘制
            drawRoundedRect('white','blue',525,140,-100,-100,40);//以右下角沩起点绘制
   
</script>
</html>